<template>
  <div>
    <h1 class="title">
      <span class="title_name">订单详情</span>
      <span class="other">
      <span class="title_count">{{total}}条</span>
      筛选：
      <el-select v-model="page.payStatus" @change="selectQuery">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </span>
    </h1>
    <div>
      <div class="item" v-for="item in order">
        <el-row type="flex" class="item_title">
          <el-col :span="16">
            <div class="">
              <span>订单编号：{{item.order}}</span>
              <span>下单时间：{{item.time}}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-dark">
              <span>支付状态：
                <span v-show="orderList.indexOf(item.id) === -1" :class="payTypeClass(item.payStatus)"
                      v-text="item.payStatus"></span>
                <select class="pay_status" v-show="orderList.indexOf(item.id) !== -1" v-model="item.payStatus">
                  <option v-for="i in options" :value="i.value">{{i.label}}</option>
                </select>
              </span>
              <el-button v-show="orderList.indexOf(item.id) === -1" type="info" size="mini" @click="edit(item.id)">编辑
              </el-button>
              <el-button v-show="orderList.indexOf(item.id) !== -1" type="info" size="mini" @click="editSave(item.id)">
                确认修改
              </el-button>
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" class="item_body">
          <el-col :span="12">
            <div class="">
              <div class="img"><img class="item_img" src="../assets/item.png"/></div>
              <div class="info">
                <div>
                  <div class="line">
                    <label>产品名称：</label>
                    <em>{{item.goodsName}}</em>
                  </div>
                  <div class="line">
                    <label>单价：</label>
                    <em>￥{{(item.goodsPrice).toFixed(2)}}</em>
                  </div>
                  <div class="line">
                    <label> 数量：</label>
                    <em>{{item.goodsTotal}}</em>
                  </div>
                  <div class="line">
                    <label> 总金额：</label>
                    <em>￥{{(item.orderAmount).toFixed(2)}}</em>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="bg-purple-dark">
              <div class="line">
                <label>姓名：</label>
                <input v-show="orderList.indexOf(item.id) !== -1" v-model="item.userName"></input>
                <span v-show="orderList.indexOf(item.id) == -1">{{item.userName}}</span>
              </div>
              <div class="line">
                <label>联系电话：</label>
                <input v-show="orderList.indexOf(item.id) !== -1" v-model="item.phone"></input>
                <span v-show="orderList.indexOf(item.id) == -1">{{item.phone}}</span>
              </div>
              <div class="line">
                <label>F码：</label>
                <!--<input v-show="orderList.indexOf(item.id) !== -1" v-model="item.fCode"></input>-->
                <span>{{item.fCode}}</span>
              </div>
              <div class="line">
                <label>收件地址：</label>
                <input v-show="orderList.indexOf(item.id) !== -1" v-model="item.deliveryAddress"></input>
                <span v-show="orderList.indexOf(item.id) == -1">{{item.deliveryAddress}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" @current-change="currentChange" prev-text="上一页"
                     next-text="下一页" :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  // 订单
  export default {
    name: "order",
    data() {
      return {
        order: [],
        options: [{
          value: '未付款',
          label: '未付款'
        }, {
          value: '已付款',
          label: '已付款'
        }, {
          value: '已发货',
          label: '已发货'
        }, {
          value: '已签收',
          label: '已签收'
        }],
        value: '',
        orderList: [],
        total: 0,
        page: {
          pageIndex: 1,
          pageSize: 10,
          payStatus: '已付款'
        }
      }
    },
    created() {
      this.initOrder()
    },
    methods: {
      initOrder() {
        this.$post('/order/admin/list', this.page, res => {
          this.order = res.list
          this.total = res.total
          if (res.list.length == 0) {
            this.$message({message: '没有查询到数据', type: 'warning'})
          }
        })
      },
      selectQuery(query) {
        this.page.payStatus = query
        this.page.pageIndex = 1
        this.initOrder()
      },
      edit(_id) {
        this.orderList.push(_id)
      },
      editSave(_id) {
        let _index = -1
        let list = this.orderList
        for (let i in list) {
          if (list[i] == _id) {
            _index = i
            break
          }
        }
        debugger
        this.orderList.splice(_index, 1)
        let order = this.order[parseInt(_index)]
        this.$post('/order/admin/update', {
          id: order.orderId,
          payStatus: order.payStatus,
          userName: order.userName,
          phone: order.phone,
          deliveryAddress: order.deliveryAddress
        }, res => {
          this.$message({message: '操作成功', type: 'success'})
          this.initOrder()
        })
      },
// 支付状态样式计算
      payTypeClass(value) {
        if (value == '已付款')
          return 'green'
        else
          return 'red'
      },
      // 分页按钮
      currentChange(e) {
        this.page.pageIndex = e
        this.initOrder()
      },
      _moneyFormatting(money) {
        return money + ""
      }
    }
  }
</script>

<style scoped>
  .title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
  }

  .title .other {
    font-weight: 500;
    font-size: 14px;
  }

  .item_title {
    background-color: #EEEEEE;
    line-height: 28px;
    padding-left: 10px;
    font-size: 12px;
  }

  .item {
    margin-top: 20px;
    border: 1px solid #EBEEF5;
  }

  .item_body {
    padding: 10px;
    font-size: 12px;
  }

  .item_body .info .line, .item_body .bg-purple-dark .line {
    line-height: 24px;
  }

  .pay_status {
    height: 24px;
  }

  em {
    font-family: verdana;
    font-style: normal;
  }

  .img {
    float: left;
    margin-right: 10px;
    height: 100px;
    width: 100px;
    overflow: hidden;
  }

  .img img {
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .pay {
    color: #67C23A;
  }

  .grid-content {
    text-align: right;
  }

  .pagination {
    margin-top: 30px;
    text-align: center;
  }

  .green {
    color: #67C23A;
  }

  .red {
    color: #F56C6C;
  }
</style>
